
import React, { useImperativeHandle, useRef, forwardRef, useEffect } from "react";


import CountUp from 'react-countup';
const formatter = (value: number) => <CountUp end={value} separator="," />;



   const TagHook = (props:any)=>{

     const {tagName,value1} =props


      useEffect(()=>{
      
        props.handleClick( document.getElementById('id1'))
      },[])
    return <>
    
    <div  id='id1' style={{display:'none'}}>
        
        <div style={{position:'relative',width:'400px',height:'322px',color: '#fff'}}>
            <img src="./信息背景.png" alt="" style={{width:'100%',position: 'absolute',left: '0px',top: '0px'}} />

            <div style={{position:'absolute',left:'48px',top:'36px',fontSize:'16px',}}>
                <div style={{fontSize:'20px',fontWeight:'400'}}>
                    <span>{tagName}</span>
                </div>
                <div style={{marginTop: '30px'}}>
                    <span style={{fontWeight: '400',marginLeft: '80px',fontSize: '40px',color: '#00ffff',}}>
                 {formatter(value1)}
                         L</span>
                </div>
                <div style={{marginTop: '20px'}}>
                    <span style={{color: '#ccc',fontWeight: '300',}}>操作员：</span><span
                        style={{fontWeight: '400',marginLeft: '30px'}}>王大锤</span>
                </div>
                <div style={{marginTop: '10px'}}>
                    <span style={{color: '#ccc',fontWeight: '300',}}>机器号：</span><span
                       style={{fontWeight: '400',marginLeft: '30px'}}>9527</span>
                </div>
            </div>
            <div style={{position:'absolute',left:'285px',top:'35px'}}>
                <span style={{color: '#ffff00'}}>异常</span>
            </div>
        </div>
    </div>
    </>

   }

export default TagHook